<template>
    <span class="rank-number" :class="rankClass">{{ rank }}</span>
</template>

<script setup>
import { computed } from 'vue'

// 正确接收 props 并解构
const props = defineProps({
    rank: {
        type: Number,
        required: true
    }
})
// 使用解构后的 props.rank 而非直接使用 props
const rankClass = computed(() => {
    if (props.rank === 1) return 'first'
    if (props.rank === 2) return 'second'
    if (props.rank === 3) return 'third'
    return ''
})
</script>
<style scoped>
.rank-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: #9d9d9d;
    margin-right: 10px;
    border-radius: 4px;
    color: white;
}

/* 前三名样式 */
.rank-number.first {
    background-color: #ff011b;
}
.rank-number.second {
    background-color: #ff6e00;
}
.rank-number.third {
    background-color: #00b9ff;
}
</style>